var slide = document.querySelectorAll(".swiper-slide");
var sw = document.querySelector(".swiper-wrapper");
var dt = document.querySelector(".dt");
var ml = document.querySelector(".ml");
var temp,temp2;

//console.log(slide.length);
var xhr = new XMLHttpRequest();
var url = "https://www.easy-mock.com/mock/5aab25e6e80e0d51a5160fb3/music";
xhr.open("GET",url+"/data");
xhr.send();
xhr.addEventListener("readystatechange",function(){
	if(xhr.readyState==4 && xhr.status==200){
		var str = xhr.response;
		var obj = JSON.parse(str);
//		console.log(obj.data.slider[0].id);
		slide[0].innerHTML = `<a href="${obj.data.slider[4].linkUrl}"><img src="${obj.data.slider[4].picUrl}"/></a>`;
		slide[6].innerHTML = `<a href="${obj.data.slider[0].linkUrl}"><img src="${obj.data.slider[0].picUrl}"/><a/>`;
		for(var i=0;i<5;i++){
			slide[i+1].innerHTML = `<a href="${obj.data.slider[i].linkUrl}"><img src="${obj.data.slider[i].picUrl}"/></a>`;
		}
//		for(var i=0;i<5;i++){
//			temp = `<div class="swiper-slide"><img src="${obj.data.slider[i].picUrl}"/></div>`;
//			sw.innerHTML += temp;
//		}
		for(var j=0;j<2;j++){
			temp = `<div class="radio_list">
						<a>
							<div class="list_pic">
								<img src="${obj.data.radioList[j].picUrl}"/>
							</div>
							<div class="list_info">${obj.data.radioList[j].Ftitle}</div>
						</a>
					</div>`
			
			dt.innerHTML += temp;
		}
		
		for(var k=0;k<6;k++){
			temp2 = `<div class="radio_list">
						<a>
							<div class="list_pic">
								<img src="${obj.data.songList[k].picUrl}"/>
							</div>
							<div class="list_info">
								<span class="list_tit">${obj.data.songList[k].songListDesc}</span>
								<p class="list_text">${obj.data.songList[k].songListAuthor}</p>
							</div>
						</a>
					</div>`
			
			ml.innerHTML += temp2;
		}

	}
})
